import {
  PropsWithChildren,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";
import { SvgIcon } from "./SvgIcon";
import { ILegalAdviceItem } from "@/store";
import {
  IRequestRenderContext,
  RequestRenderContext,
} from "./RequestRenderContext";
import { IResultItem } from "@/api/server/recommend_question";
import { Input, Popconfirm } from "antd";
import { useClickAway } from "ahooks";
import { Condition } from "./Condition";

interface ISiderBarItemProps {
  className?: string;
  info?: any;
  isActive?: boolean;
  onClick?: () => void;
  onOperation?: (type: string, value: string | boolean) => void;
}

export function SiderBarList(props: PropsWithChildren<ISiderBarItemProps>) {
  const data =
    useContext<IRequestRenderContext<IResultItem[]>>(RequestRenderContext);
  return <div>{JSON.stringify(data)}</div>;
}

export function SiderBarItem(props: PropsWithChildren<ISiderBarItemProps>) {
  const { isActive, info, onClick, onOperation } = props;
  const [editTitle, setEditTitle] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const confirmSpanRef = useRef(null);
  const inputRef = useRef(null);
  const inputDivRef = useRef(null);

  const name = info?.name;
  const time = info?.time;
  const icon = info?.icon;
  const is_pinned = info?.is_pinned;
  const is_favorite = info?.is_favorite;

  useClickAway(() => {
    setEditTitle(false);
  }, inputDivRef);

  useClickAway(() => {
    setConfirmOpen(false);
  }, confirmSpanRef);

  useEffect(() => {
    if (editTitle) {
      inputRef.current.focus();
    }
  }, [editTitle]);

  return (
    <div
      className={["CardWarp", isActive && "CardWarp--Active"]
        .filter(Boolean)
        .join(" ")}
      onClick={() => onClick?.()}
    >
      <div className="Card__Inner">
        <div
          className={["Card", isActive && "Card--Active"]
            .filter(Boolean)
            .join(" ")}
        >
          <div className="Card__Icon">
            <SvgIcon
              color="rgb(44, 121, 241)"
              size={20}
              name={icon || "icon-a-conversation11"}
            />
          </div>
          <div className="Card__Main">
            <div className="Card__Main__Top">
              <div className="TitleWrapper">
                <div className="TitleEditor" ref={inputDivRef}>
                  <Condition condition={editTitle}>
                    <Input
                      defaultValue={name}
                      variant="borderless"
                      ref={inputRef}
                      size="small"
                      className="bg-white"
                      suffix={
                        <div className="flex flex-row">
                          <SvgIcon
                            name="icon-quxiao_default"
                            onClick={() => setEditTitle(false)}
                            className="hover:text-[#185FEE]"
                          />
                          <SvgIcon
                            name="icon-queren_default"
                            onClick={() => {
                              const v = inputRef.current?.input?.value?.trim();

                              if (v) {
                                onOperation("edit", v);
                              }

                              setEditTitle(false);
                            }}
                            className="hover:text-[#185FEE]"
                          />
                        </div>
                      }
                    />
                  </Condition>
                  <Condition condition={!editTitle}>
                    <span
                      className="TextWrapper"
                      style={{
                        width: "100%",
                        textAlign: "left",
                        fontWeight: 500,
                      }}
                      title={name}
                    >
                      {name}
                    </span>
                  </Condition>
                </div>
              </div>
              <Condition condition={!editTitle}>
                <div className="flex flex-row gap-[10px] items-center">
                  <Condition condition={is_pinned}>
                    <SvgIcon
                      className="anticon Icon"
                      color="rgb(24, 95, 238)"
                      style={{ transform: "rotate(15deg)" }}
                      name="icon-yizhiding"
                      onClick={() => {
                        onOperation("pinned", false);
                        setConfirmOpen(false);
                      }}
                    />
                  </Condition>
                  <Condition condition={is_favorite}>
                    <SvgIcon
                      className="anticon Icon"
                      color="rgb(24, 95, 238)"
                      name="icon-yishoucang"
                      onClick={() => {
                        onOperation("favorite", false);
                        setConfirmOpen(false);
                      }}
                    />
                  </Condition>
                </div>
                <div
                  className="ActionLayer"
                  style={{
                    width: confirmOpen ? "auto" : undefined,
                    display: "grid",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "10px",
                    gridAutoFlow: "column",
                    gridAutoRows: "auto",
                  }}
                >
                  <Condition condition={!is_pinned}>
                    <SvgIcon
                      className="anticon Icon"
                      name="icon-zhiding_default"
                      onClick={() => {
                        onOperation("pinned", true);
                        setConfirmOpen(false);
                      }}
                    />
                  </Condition>
                  <Condition condition={!is_favorite}>
                    <SvgIcon
                      className="anticon Icon"
                      name="icon-shoucang_default"
                      onClick={() => {
                        onOperation("favorite", true);
                        setConfirmOpen(false);
                      }}
                    />
                  </Condition>
                  <SvgIcon
                    className="anticon Icon"
                    name="icon-bianji_default"
                    onClick={() => {
                      setEditTitle(true);
                      setConfirmOpen(false);
                      // onOperation("shoucang", true);
                    }}
                  />
                  <Popconfirm
                    placement="right"
                    autoAdjustOverflow={false}
                    title={"确认删除这段对话吗?"}
                    okText="删除"
                    cancelText="取消"
                    open={confirmOpen}
                    onConfirm={(e) => {
                      e.stopPropagation();
                      onOperation("delete", true);
                      setConfirmOpen(false);
                    }}
                    onCancel={(e) => {
                      e.stopPropagation();
                      setConfirmOpen(false);
                    }}
                  >
                    <span>
                      <span ref={confirmSpanRef}>
                        <SvgIcon
                          onClick={() => setConfirmOpen(true)}
                          className="anticon Icon"
                          name="icon-shanchu_default"
                        />
                      </span>
                    </span>
                  </Popconfirm>
                </div>
              </Condition>
            </div>
            <div className="Card__Main__Bottom">
              <span>{time}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
